<template>
  <view class="cu-modal" :class="show ? 'show' : ''">
    <view class="cu-dialog my-prize-dialog image-previewer" @click.stop>
      <view class="image-slider">
        <swiper
          :indicator-dots="true"
          indicator-color="#ffffff"
          indicator-active-color="#ff5500"
          :current="currentIndex"
          @change="handleSwiperChange"
          style="height: 100%; position: relative"
        >
          <swiper-item v-for="(img, index) in link" :key="index">
            <div class="preview-image">
              <img class="img" :src="img" @click="close" />
              <div class="text">本人艺术照仅供参考</div>
            </div>
          </swiper-item>
        </swiper>
      </view>
      <u-icon
        class="icon"
        name="close"
        color="#fff"
        size="26"
        @click="close"
      ></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  name: "PreviewImage",
  data() {
    return {
      currentIndex: 0,
      link: [],
      show: false,
      width: 0,
      height: 0,
      mode: "aspectFit", // 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    };
  },
  methods: {
    open(url) {
      this.currentIndex = 0;
      this.link = url;
      this.show = true;
    },
    hide() {},
    close() {
      this.show = false;
    },
    handleSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  height: 300rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
.icon {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 8px;
}
.image-previewer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99999;
}

.image-slider {
  width: 100vw;
  height: 100vh;
}

.preview-image {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 100vh;
  max-width: 100vw;
}
.text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  color: #c5c5c5;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 5px;
}
</style>
